<template>
  <div id="paperAnalysisInfo">
    <!--试卷分析-->
    <el-row :gutter="24">
      <!--头部-->
      <el-col :span="24">
        <el-card style="margin-bottom: 10px;background: #22944E;color: #fff;text-align: center;font-size: 16px">
          <span style="float: left;">交卷时间 ：{{updateTime}}</span>
          <span style="font-size: 20px;font-weight: 700">{{examName}}</span>
          <span style="float: right">得分 ：<span style="color: #FFF000;font-size: 20px;font-weight: 700">{{ascroe}}分</span>/总分{{grade}}分</span>
        </el-card>
      </el-col>
      <!--答题卡-->
      <el-col :span="6" :xs="24" style="margin-bottom: 10px;width: 380px;" class="datika">
        <el-card style="padding-bottom: 60px;">
          <div class="card-title" style="background: #22944E;color: #fff">答题卡</div>
          <el-row :gutter="24" class="card-line" style="margin-left: 20px;margin-top: 16px">
            <el-tag type="info" style="width: 60px;height: 28px;line-height: 28px;font-size: 14px;">未作答</el-tag>
            <el-tag type="success" style="width: 60px;height: 28px;line-height: 28px;font-size: 14px;">正确</el-tag>
            <el-tag type="success" style="width: 60px;height: 28px;line-height: 28px;font-size: 14px;background: #FFFAE4;color: #FFCC00; border: 1px solid #FFF0B2;">错误</el-tag>
          </el-row>
          <div v-if="paperData.radioList!==undefined && paperData.radioList.length > 0">
            <p class="card-title">一、单选题</p>
            <el-row :gutter="24" class="card-line" style="margin-left: 20px;margin-right: 20px">
              <el-tag v-for="(item1,index1) in paperData.radioList" :type="cardItemClass(item1)" :key="index1"> {{ index1+1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="paperData.multiList!==undefined && paperData.multiList.length > 0">
            <p class="card-title">二、多选题</p>
            <el-row :gutter="24" class="card-line" style="margin-left: 20px;margin-right: 20px">
              <el-tag v-for="(item2,index2) in paperData.multiList" :type="cardItemClass(item2)" :key="index2">{{ a+index2+1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="paperData.judgeList!==undefined && paperData.judgeList.length > 0">
            <p class="card-title">三、判断题</p>
            <el-row :gutter="24" class="card-line" style="margin-left: 20px;margin-right: 20px">
              <el-tag v-for="(item3,index3) in paperData.judgeList" :type="cardItemClass(item3)" :key="index3">{{ b+index3+1 }}</el-tag>
            </el-row>
          </div>

          <div v-if="paperData.saqList!==undefined && paperData.saqList.length > 0">
            <p class="card-title">四、简答题</p>
            <el-row :gutter="24" class="card-line" style="margin-left: 20px;margin-right: 20px">
              <el-tag v-for="(item4,index4) in paperData.saqList" :type="cardItemClass(item4)" :key="index4">{{ c+index4+1 }}</el-tag>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <!--解析区-->
      <el-col :span="18" :xs="24" style="width: 784px;">
        <el-card class="qu-content">
          <!--单选题-->
          <div class="singleChoice">
            <div class="singleChoice-tit">一、单选题 <span>（ 共{{a}}题 ）</span> </div>
            <ul v-for="(item,index) in paperData.radioList" :key="index">
              <li>
                <p class="singleChoice-li-tit">{{ index + 1 }}.（ {{item.examQuestionVO.grade}}分 ）{{ item.examQuestionVO.questionTitle }}
                  <img v-if="item.examAnswerRecord.isOK==0" src="@/assets/images/examination/fork.png" alt="">
                  <img v-if="item.examAnswerRecord.isOK==1" src="@/assets/images/examination/hook.png" alt="">
                </p>
                <div class="singleChoice-li-c">
                  <div
                    :class="item.examQuestionVO.questionAnswer!=item5.code?'singleChoice-li-qita':'singleChoice-li-daan'"
                    v-for="(item5,index5) in item.questionOptions"
                    :key="index5">
                    {{ item5.code }}.{{ item5.content }}
                    <img v-if="item.examQuestionVO.questionAnswer==item5.code" src="@/assets/images/examination/hook.png" alt="">
                  </div>
                  <!--<div class="singleChoice-li-xuanze">B.2021年</div>-->
                  <!--<div class="singleChoice-li-qita">C.2022年</div>-->
                  <!--<div class="singleChoice-li-daan">D.2023年<img src="@/assets/images/examination/fork.png" alt=""></div>-->
                </div>
                <div class="singleChoice-li-b">
                  <div>正确答案：{{item.examQuestionVO.questionAnswer}}</div>
                  <div>
                    解析：{{item.examQuestionVO.analysis}}
                  </div>
                </div>
              </li>
            </ul>

            <div class="singleChoice-tit">二、多选题 <span>（ 共{{b-a}}题 ）</span> </div>
            <ul v-for="(item,index) in paperData.multiList" :key="index">
              <li>
                <p class="singleChoice-li-tit">{{ a+index + 1 }}.（ {{item.examQuestionVO.grade}}分 ）{{ item.examQuestionVO.questionTitle }}
                  <img v-if="item.examAnswerRecord.isOK==0" src="@/assets/images/examination/fork.png" alt="">
                  <img v-if="item.examAnswerRecord.isOK==1" src="@/assets/images/examination/hook.png" alt="">
                </p>
                <div class="singleChoice-li-c">
                  <div
                    :class="item.examQuestionVO.answerList.indexOf(item5.code)==-1?'singleChoice-li-qita':'singleChoice-li-daan'"
                    v-for="(item5,index5) in item.questionOptions"
                    :key="index5">
                    {{ item5.code }}.{{ item5.content }}
                    <img v-if="item.examQuestionVO.answerList.indexOf(item5.code)!=-1" src="@/assets/images/examination/hook.png" alt="">
                  </div>
                </div>
                <div class="singleChoice-li-b">
                  <div>正确答案：{{item.examQuestionVO.questionAnswer}}</div>
                  <div>
                    解析：{{item.examQuestionVO.analysis}}
                  </div>
                </div>
              </li>
            </ul>

            <div class="singleChoice-tit">三、判断题 <span>（ 共{{c-b}}题 ）</span> </div>
            <!--<ul v-for="(item,index) in paperData.judgeList" :key="index">-->
              <!--<li>-->
                <!--<p class="singleChoice-li-tit">{{ b + index + 1 }}.（ {{item.examQuestionVO.grade}}分 ）{{ item.examQuestionVO.questionTitle }}-->
                  <!--<img v-if="item.examAnswerRecord.isOK==0" src="@/assets/images/examination/fork.png" alt="">-->
                  <!--<img v-if="item.examAnswerRecord.isOK==1" src="@/assets/images/examination/hook.png" alt="">-->
                <!--</p>-->
                <!--<div class="singleChoice-li-c">-->
                  <!--<div :class="item.examQuestionVO.questionAnswer!='对'?'singleChoice-li-qita':'singleChoice-li-daan'">-->
                    <!--A.对-->
                    <!--<img v-if="item.examQuestionVO.questionAnswer=='对'" src="@/assets/images/examination/hook.png" alt="">-->
                  <!--</div>-->
                  <!--<div :class="item.examQuestionVO.questionAnswer!='错'?'singleChoice-li-qita':'singleChoice-li-daan'">-->
                    <!--A.错-->
                    <!--<img v-if="item.examQuestionVO.questionAnswer=='错'" src="@/assets/images/examination/hook.png" alt="">-->
                  <!--</div>-->
                <!--</div>-->
                <!--<div class="singleChoice-li-b">-->
                  <!--<div>正确答案：{{item.examQuestionVO.questionAnswer}}</div>-->
                  <!--<div>-->
                    <!--解析：{{item.examQuestionVO.analysis}}-->
                  <!--</div>-->
                <!--</div>-->
              <!--</li>-->
            <!--</ul>-->
            <ul v-for="(item,index) in paperData.judgeList" :key="index">
              <li>
                <p class="singleChoice-li-tit">{{ b + index + 1  }}.（ {{item.examQuestionVO.grade}}分 ）{{ item.examQuestionVO.questionTitle }}
                  <img v-if="item.examAnswerRecord.isOK==0" src="@/assets/images/examination/fork.png" alt="">
                  <img v-if="item.examAnswerRecord.isOK==1" src="@/assets/images/examination/hook.png" alt="">
                </p>
                <div class="singleChoice-li-c">
                  <div
                    :class="item.examQuestionVO.questionAnswer!=item5.code?'singleChoice-li-qita':'singleChoice-li-daan'"
                    v-for="(item5,index5) in item.questionOptions"
                    :key="index5">
                    {{ item5.code }}.{{ item5.content }}
                    <img v-if="item.examQuestionVO.questionAnswer==item5.code" src="@/assets/images/examination/hook.png" alt="">
                  </div>
                </div>
                <div class="singleChoice-li-b">
                  <div>正确答案：{{item.examQuestionVO.questionAnswer}}</div>
                  <div>
                    解析：{{item.examQuestionVO.analysis}}
                  </div>
                </div>
              </li>
            </ul>

            <div class="singleChoice-tit">四、简答题 <span>（ 共{{d-c}}题 ）</span> </div>
            <ul v-for="(item,index) in paperData.saqList" :key="index">
              <li>
                <p class="singleChoice-li-tit">{{ c + index + 1 }}.（ {{item.examQuestionVO.grade}}分 ）{{ item.examQuestionVO.questionTitle }}
                  <img v-if="item.examAnswerRecord.isOK==0" src="@/assets/images/examination/fork.png" alt="">
                  <img v-if="item.examAnswerRecord.isOK==1" src="@/assets/images/examination/hook.png" alt="">
                </p>
                <div class="singleChoice-li-b">
                  <div>正确答案：{{item.examQuestionVO.questionAnswerReply}}</div>
                  <div>
                    解析：{{item.examQuestionVO.analysis}}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { beginExam } from '@/request/api'
  import { formatDate } from '@/utils'
  export default {
    name: 'paperAnalysisInfo',
    data () {
      return {
        // 试卷ID
        paperId: '',
        // 当前答题卡
        cardItem: {},
        allItem: [],
        // 当前题目内容
        quData: {
          answerList: []
        },
        // 试卷信息
        paperData: {
          leftSeconds: 99999,
          radioList: [], // 单选
          multiList: [], // 多选
          judgeList: [], // 判断
          saqList: [] // 简答
        },
        examName: '',//试卷名称
        updateTime: '',//交卷时间
        grade: '',//总分
        ascroe: '',//得分
        questionDto: [],//全部题目包括答案解析
//        有多少道什么题
        a: 0,
        b: 0,
        c: 0,
        d: 0,
      }
    },
    created() {
      const id = this.$route.params.id
      if (typeof id !== 'undefined') {
        this.paperId = id
        this.getSJ()
      }
    },
    methods: {
      //        获取试卷
      getSJ() {
        var params1 = {
          "BTime": '',
          "ETime": '',
          "ascroe": '',
          "eid": JSON.parse(localStorage.getItem('userInfo')).userType,
          "examinationInfoID": this.paperId,
          memberId: JSON.parse(localStorage.getItem('userInfo')).id,
        }
        beginExam(params1).then(res => {
          if (res.code == 200) {
            this.examName= res.data.exam.exam_name
            this.grade= res.data.exam.grade
            this.ascroe= res.data.examRecord.ascroe
            this.updateTime= formatDate(res.data.exam.update_time)
            this.questionDto = res.data.questionDto
            this.paperData = {
              leftSeconds: '',
              radioList: [], // 单选
              multiList: [], // 多选
              judgeList: [], // 判断
              saqList: [] // 简答
            },
              this.a = res.data.totalMap['0']
            this.b = this.a+res.data.totalMap['1']
            this.c = this.b+res.data.totalMap['2']
            this.d = this.c+res.data.totalMap['3']
            this.questionDto.forEach((item,index)=> {
              if(index<this.a) {
                this.paperData.radioList.push(item)
              }else if(this.a <= index && index < this.b){
                item.examQuestionVO.answerList = item.examQuestionVO.questionAnswer.split(',')
                this.paperData.multiList.push(item)
              }else if(this.b <= index && index < this.c){
                this.paperData.judgeList.push(item)
              }else if(this.c <= index && index < this.d){
                this.paperData.saqList.push(item)
              }
            })
          }
        })
      },
      // 答题卡样式
      cardItemClass(item) {
          if(item.examAnswerRecord.sign==0) {
            return 'warning'
          }else if(item.examAnswerRecord.isOK==1) {
            return 'success'
          }else {
            return 'info'
          }
      },
    }
  }
</script>

<style scoped>
  #paperAnalysisInfo {
    padding: 30px;
  }
  .web-cam{
    position: absolute;
    right: 5px;
    bottom: 10px;
  }
  .qu-content{

  }
  .qu-content div{
    line-height: 30px;
  }
  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }
  .card-title{
    background: rgba(34, 148, 78, 0.2);
    color: #22944E;
    height: 40px;
    line-height: 40px;
    /*text-align: center;*/
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  .card-line{
    /*padding-left: 10px*/
  }
  .card-line span {
    cursor: pointer;
    margin: 2px;
  }
  /deep/
  .el-radio, .el-checkbox{
    padding: 9px 20px 9px 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }
  .is-checked{
    background: #E8F4ED;
    border: 1px solid #22944E;
  }
  .is-checked .el-radio__label {
    color: #22944E;
  }
  .el-radio img, .el-checkbox img{
    max-width: 200px;
    max-height: 200px;
    border: #dcdfe6 1px dotted;
  }
  /deep/
  .el-checkbox__inner {
    display: none;
  }
  /deep/
  .el-radio__inner{
    display: none;
  }
  /deep/
  .el-checkbox__label{
    line-height: 30px;
  }
  /deep/
  .el-radio__label {
    line-height: 30px;
    font-size: 16px;
  }
  .datika /deep/ .el-card__body {
    padding: 0
  }
  /deep/ .el-tag {
           width: 40px;
           height: 40px;
           text-align: center;
           line-height: 40px;
           font-size: 18px;
         }


  .singleChoice {

  }
  .singleChoice .singleChoice-tit {
    height: 40px;
    line-height: 40px;
    width: 100%;
    padding-left: 20px;
    border-bottom: 1px solid #E5E5E5;
    font-size: 18px;
    box-sizing: border-box;
  }
  .singleChoice .singleChoice-tit span {
    font-size: 14px;
    color: #9A9A9A;
  }
  .qu-content /deep/ .el-card__body {
    padding: 0
  }
  .singleChoice ul {
    padding: 0;
    margin: 0;
  }
  .singleChoice ul li {
    list-style-type:none;
    border-bottom: 1px solid #E5E5E5;
    padding: 20px 20px 30px;
    font-size: 16px;
  }
  .singleChoice-li-xuanze, .singleChoice-li-qita, .singleChoice-li-daan {
    width: 480px;
    height: 40px;
    line-height: 40px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
  }
  .singleChoice-li-xuanze {
    background: #FFE5E5;
    border: 1px solid #FF0000;
    color: #FF0000;
  }
  .singleChoice-li-daan {
    background: #E8F4ED;
    border: 1px solid #22944E;
    color: #22944E;
  }
  .singleChoice-li-xuanze img, .singleChoice-li-daan img{
    float: right;
    margin: 9px 20px;
  }
  .singleChoice-li-b {
    color: #FF0001;
    line-height: 24px;
  }
</style>
